<script setup>
import { reactive } from 'vue'
import { login } from '@/api/login.js'
import { useRouter } from 'vue-router'
import useToken from '@/stores/token.js'
import { message } from 'ant-design-vue'
const router = useRouter()
const { updateToken } = useToken()
const loginForm = reactive({
   username: 'admin', 
   password: 'admin123',
   isAgree: false 
})
//校验
//自定义校验规则
//当前规则，当前值
const validatorAgree = (rule,value) =>{
   //判断value式true还是false
   return value ? Promise.resolve() : Promise.reject(new Error("您必须同意用户协议"))
}
const rules = {
   username:[{ required: true, message: '请输入用户名',trigger:'blur' }],
   password:[{ required: true, message: '请输入密码',trigger:'blur' }],
   isAgree:[{validator: validatorAgree}]
}
const onFinish = async(values) =>{
   const token = await login({username:values.username,password:values.password})
   console.log(token);
   updateToken(token)
  message.success('登录成功')
  router.push('/')
}
</script>
<template>
   <div class="login-container">
     <div class="logo"></div>
     <div class="form">
       <a-card class="login-card">
         <h3>智慧园区-登录</h3>
         <a-form  @finish="onFinish" :rules="rules" :model="loginForm"  layout="vertical" autocomplete="off">
          <a-form-item label ="账号" name="username">
            <a-input size="large" v-model:value="loginForm.username" style="font-size: 14px;" ></a-input>
          </a-form-item>
          <a-form-item label="密码" name="password">
            <a-input-password v-model:value="loginForm.password" size="large" style="font-size: 14px;"></a-input-password>
          </a-form-item>
          <a-form-item  name="isAgree">
            <a-checkbox  v-model:checked="loginForm.isAgree">用户平台使用协议</a-checkbox>
          </a-form-item>
          <a-form-item>
            <a-button size="large" type="primary" block  htmlType="submit">登录</a-button>
          </a-form-item>
        </a-form>
       </a-card>
     </div>
   </div>
 </template>
 
 <style lang="less">
 .login-container {
   display: flex;
   align-items: stretch;
   height: 100vh;
   .logo {
     width: 60vw;
     background: rgba(38, 72, 176) url(../../assets/common/login.svg) no-repeat center / cover;
     border-top-right-radius: 60px;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     justify-content: center;
     padding: 0 100px;
     p {
       color: #fff;
       font-size: 18px;
       margin-top: 20px;
       width: 300px;
       text-align: center;
     }
   }
   .form {
     flex: 2;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding-left: 50px;
     .ant-card {
       width: 370px;
       border: none;
       padding: 0;
       margin-left: 100px;
     }
     h3 {
    padding-bottom: 76px;
    font-size: 27px;
    font-weight: 500;
    color: #1e2023;
     }
   }
 }
 </style>
 